<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/shoppingend.css" />
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col offset="10">结算</van-col>

				</van-row>

			</header>
			<section>
				<van-card num="2" price="2.00" desc="描述信息"  title="商品标题"></van-card>
				<van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList" disabled-text="以下地址超出配送范围"
				 @add="onAdd" @edit="onEdit"></van-address-list>


			</section>

			</footer>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						chosenAddressId: '1',
						list: [{
								id: '1',
								name: '张三',
								tel: '13000000000',
								address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
							},
							{
								id: '2',
								name: '李四',
								tel: '1310000000',
								address: '浙江省杭州市拱墅区莫干山路 50 号'
							}
						],
						disabledList: [{
							id: '3',
							name: '王五',
							tel: '1320000000',
							address: '浙江省杭州市滨江区江南大道 15 号'
						}]
					}
				},

				methods: {
					onAdd() {
						Toast('新增地址');
					},

					onEdit(item, index) {
						Toast('编辑地址:' + index);
					}


				}

			})
		</script>
	</body>
</html>
